<script setup lang="ts">
import imgUrl_1 from '@/assets/images/latency/design/01.png';
import imgUrl_2 from '@/assets/images/latency/design/02.png';
import imgUrl_3 from '@/assets/images/latency/design/03.png';

interface AdvantageData {
  imgUrl: string;
  title: string;
  comment: string;
}
const advantageList: AdvantageData[] = [
  {
    imgUrl: imgUrl_1,
    title: '稳定',
    comment:
      '覆盖全球多个重要金融城市的专属金融网,自建稳定链路实现多节点延伸。',
  },
  {
    imgUrl: imgUrl_2,
    title: '低延时',
    comment:
      '自建「金融网」专线，为「金融客户」打造的一张专属低延时网络，在可控的成本下能提供更具性价比的服务。 ',
  },
  {
    imgUrl: imgUrl_3,
    title: '响应快',
    comment:
      '熟知当地行规及政策，提供7*24小时的全天候双语客服和技术响应，保障线路的高可用性。',
  },
];
</script>

<template>
  <div class="latency-advantage">
    <div class="container">
      <div class="advantageBody">
        <div class="box" v-for="item in advantageList" :key="item.title">
          <img v-lazy="item.imgUrl" alt="" />
          <div class="titleBox">
            <div class="circle">
              <div class="dot"></div>
            </div>
            <div class="title">{{ item.title }}</div>
          </div>
          <div class="comment">
            {{ item.comment }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.latency-advantage {
  width: 100%;
  padding: 150px 0;
  .container {
    height: 100%;
    .advantageBody {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .box {
        width: 352px;
        height: 452px;
        display: flex;
        flex-direction: column;
        background-color: #f5f9ff;
        border-radius: 25px;
        transition: all 0.5s;

        &:hover {
          box-shadow: 4px 3px 18px 0px rgba(6, 2, 3, 0.2);
        }
        .titleBox {
          margin: 20px 0 20px 40px;
          display: flex;
          align-items: center;
          .circle {
            width: 20px;
            height: 20px;
            border: 3px solid #1d4e8c;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0);
            margin-right: 15px;

            position: relative;
            .dot {
              width: 7px;
              height: 7px;
              border-radius: 50%;
              background-color: #1d4e8c;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
          .title {
            font-family: 'SourceHanSansCN-Bold';
            font-weight: 700;
            font-size: 28px;
            color: #1d4e8c;
          }
        }
        .comment {
          padding: 0 40px;
          font-family: 'SourceHanSansCN-Light';
          line-height: 28px;
          font-size: 16px;
          letter-spacing: 1px;
          color: #4e4d4d;
        }
      }
    }
  }
}

// xl(1200px)至xxl(1600px)
@media screen and (min-width: 1201px) and (max-width: 1600px) {
  .container {
    width: 92%;
    .advantageBody {
      justify-content: space-evenly !important;
    }
  }
}

// md(768px)至xl(1200px)
@media screen and (min-width: 769px) and (max-width: 1200px) {
  .container {
    width: 100%;
    padding: 0 20px;
    .advantageBody {
      justify-content: space-evenly !important;
      .box {
        margin: 5px;
      }
    }
  }
}

// 0px至md(768px)
@media screen and (max-width: 768px) {
  .latency-advantage {
    padding: 80px 0;
    .container {
      width: 100%;
      padding: 0 20px;
      .advantageBody {
        justify-content: center;
        flex-wrap: wrap;
        .box {
          margin: 30px 0;
        }
      }
    }
  }
}
</style>
